<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'toolbar'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      this.chart = this.$echarts.init(this.$el)
      this.chart.showLoading({
        text: '加载中...',
        color: '#0efcff',
        textColor: '#0efcff',
        spinnerRadius: 32,
        maskColor: 'rgba(0, 0, 0, 0)',
        zlevel: 0
      })

      setTimeout(() => {
        if (this.chart) {
          this.chart.hideLoading()
          this.chart.setOption({
            title: {
              text: '全球近年气温变化',
              textStyle: {
                align: 'center',
                color: '#fff',
                fontSize: 12
              },
              top: '6%',
              x: 'center'
            },
            grid: {
              top: '25%',
              bottom: '25%' //也可设置left和right设置距离来控制图表的大小
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true
                }
              }
            },
            legend: {
              data: ['地表均温增值'],
              top: '15%',
              textStyle: {
                color: '#ffffff'
              }
            },
            xAxis: {
              data: [
                '2010',
                '2011',
                '2012',
                '2013',
                '2014',
                '2015',
                '2016',
                '2017',
                '2018',
                '2019',
                '2020',
                '2021',
                '2022',
                '2023'
              ],
              axisLine: {
                show: true, //隐藏X轴轴线
                lineStyle: {
                  color: '#01FCE3'
                }
              },
              axisTick: {
                show: true //隐藏X轴刻度
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff' //X轴文字颜色
                }
              }
            },
            yAxis: [
              {
                type: 'value',
                name: '℃',
                nameTextStyle: {
                  color: '#fff'
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: true
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#FFFFFF'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              {
                type: 'value',
                name: '同比',
                nameTextStyle: {
                  color: '#fff'
                },
                position: 'right',
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  formatter: '{value} %', //右侧Y轴文字显示
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              {
                type: 'value',
                gridIndex: 0,
                min: 50,
                max: 100,
                splitNumber: 8,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
                  }
                }
              }
            ],
            dataZoom: [
              {
                show: true,
                height: 20,
                xAxisIndex: [0],
                bottom: '5%',
                start: 10,
                end: 80,
                handleIcon:
                  'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle: {
                  color: '#d3dee5'
                },
                textStyle: {
                  color: '#fff'
                },
                borderColor: '#90979c'
              },
              {
                type: 'inside',
                show: true,
                height: 15,
                start: 1,
                end: 35
              }
            ],
            series: [
              {
                type: 'line',
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                showAllSymbol: true, //显示所有图形。
                symbol: 'circle', //标记的图形为实心圆
                symbolSize: 10, //标记的大小
                itemStyle: {
                  //折线拐点标志的样式
                  color: '#058cff'
                },
                lineStyle: {
                  color: '#058cff'
                },
                areaStyle: {
                  color: 'rgba(5,140,255, 0.2)'
                },
                data: [
                  0.11, 0.12, 0.22, 0.19, 0.09, 0.23, 0.17, 0.24, 0.08, 0.1,
                  0.22, 0.23, 0.25
                ]
              },
              {
                name: '地表均温增值',
                type: 'bar',
                barWidth: 15,
                itemStyle: {
                  normal: {
                    color: new that.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: '#00FFE3'
                        },
                        {
                          offset: 1,
                          color: '#4693EC'
                        }
                      ]
                    )
                  }
                },
                data: [
                  0.11, 0.12, 0.22, 0.19, 0.09, 0.23, 0.17, 0.24, 0.08, 0.1,
                  0.22, 0.23, 0.25
                ]
              }
            ]
          })
        }
      }, 1000)
    }
  }
}
</script>
